<template>
    <my-card style="height: 652px;width: 730px;overflow: hidden">
        <div style="display: flex;width: 100%;height: 100%">
            <div style="flex: 1;padding: 30px;display: flex;flex-direction: column">
                <div style="font-size: 22px;color: #3E3F42;margin-bottom: 6px">用户注册</div>
                <div style="font-size: 14px;color: #9EA0A5;margin-bottom: 16px">新的报名方式从这里开始</div>
                <div style="flex: 1;">
                    <div style="position: relative;margin-bottom: 16px">
                        <div style="font-size: 12px;font-weight: 500;color: #9EA0A5;margin-bottom: 7px">
                            输入您的用户名
                        </div>
                        <a-input style="height: 38px"/>
                        <div style="color: red;left: 0;top:64px;position: absolute;font-size: 8px">用户名不符合要求</div>
                    </div>
                    <div style="position: relative;margin-bottom: 26px">
                        <div style="font-size: 12px;font-weight: 500;color: #9EA0A5;margin-bottom: 7px;">
                            输入您的密码
                        </div>
                        <a-input style="height: 38px;" type="password"/>
                    </div>
                    <div style="position: relative;margin-bottom: 26px">
                        <div style="font-size: 12px;font-weight: 500;color: #9EA0A5;margin-bottom: 7px">
                            再次输入您的密码
                        </div>
                        <a-input style="height: 38px" type="password"/>
                        <div style="color: red;left: 0;top:64px;position: absolute;font-size: 8px">两次密码不一致</div>
                    </div>
                </div>
            </div>
            <div style="width: 365px;background: #2D9C3C">
                <img src="https://mir-s3-cdn-cf.behance.net/project_modules/1400/faf17c79586469.5cc8bc75d6633.png" style="height: 100%;width: 100%;object-fit: cover">
            </div>
        </div>
    </my-card>
</template>

<script>
    export default {
        name: 'SignIn',
        data() {
            return {
                form: this.$form.createForm(this),
            };
        },
    };
</script>

<style scoped>

</style>
